<template>
    <div id="left-top-bar" style="width: 100%; height: 280px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'

import echarts from '@/echarts'

import { option } from './constant'
import { SalesChannelTop } from '../../store'

export default defineComponent({
    name: 'LeftTopBar',
    setup() {
        const constant = {
            option
        }
        onMounted(async () => {
            let { option } = constant
            let {
                result: { total, list }
            } = await SalesChannelTop()

            let numberWidth = String(total).length * 8 + 8

            list.forEach((item: any) => {
                item.percent = total == 0 ? 0 : ((item.value / total) * 100).toFixed(2)
            })

            option.legend.formatter = (name: any) => {
                let items = list.find((item: any) => item.name == name)
                return `{name|${name}}  {percent|${items?.percent + '%' || ''}}`
            }
            option.legend.textStyle.rich.number.width = numberWidth
            option.title[1].text = '{num|' + total + '},{unit|元}'
            option.series[0].data = list

            echarts.init(document.getElementById('left-top-bar')).setOption(option)
        })

        return {
            ...constant
        }
    }
})
</script>
